/*
 * @Author: zhougb9 zhougb9@qq.com
 * @Date: 2025-05-20 23:11:06
 * @LastEditors: zhougb9 zhougb9@qq.com
 * @LastEditTime: 2025-05-21 20:41:08
 * @FilePath: \LibreTVe:\Code\LibreTVReact\src\components\HeaderSearch\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { SearchOutlined } from '@ant-design/icons';
import { Input, Button } from 'antd';
import { createStyles } from 'antd-style';
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { search } from '@/services/api';

const useStyles = createStyles(() => ({
  searchWrapper: {
    margin: '0 auto',
    width: 500,
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: 48,
    background: 'rgba(30, 32, 40, 0.10)',
    borderRadius: 24,
    boxShadow: '0 4px 24px 0 rgba(0,0,0,0.08)',
    zIndex: 10,
  },
  searchInput: {
    width: '100%',
    height: 40,
    borderRadius: 24,
    background: 'rgba(255,255,255,0.06)',
    border: 'none',
    color: '#ccc',
    fontSize: 18,
    paddingLeft: 20,
    paddingRight: 40,
    boxShadow: 'none',
    '::placeholder': {
      color: '#aaa',
      opacity: 1,
    },
  },
  searchIcon: {
    color: '#fff',
    fontSize: 20,
  },
  searchButton: {
    position: 'absolute',
    right: 8,
    top: '50%',
    transform: 'translateY(-50%)',
    background: 'transparent',
    border: 'none',
    padding: '4px 8px',
    cursor: 'pointer',
    '&:hover': {
      background: 'rgba(255,255,255,0.1)',
      borderRadius: 4,
    },
  },
}));

const HeaderSearch: React.FC = () => {
  const { styles } = useStyles();
  const [searchValue, setSearchValue] = useState('');
  const navigate = useNavigate();

  const handleSearch = async () => {
    if (!searchValue.trim()) return;
    navigate(`/search?keyword=${encodeURIComponent(searchValue.trim())}`);
  };

  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      handleSearch();
    }
  };

  return (
    <div className={styles.searchWrapper}>
      <Input
        className={styles.searchInput}
        placeholder="全网搜"
        prefix={<SearchOutlined className={styles.searchIcon} />}
        value={searchValue}
        onChange={(e) => setSearchValue(e.target.value)}
        onKeyPress={handleKeyPress}
        allowClear
        style={{ color: '#fff' }}
      />
      <Button
        type="text"
        icon={<SearchOutlined className={styles.searchIcon} />}
        onClick={handleSearch}
        className={styles.searchButton}
      />
    </div>
  );
};

export default HeaderSearch;
